<template>
  <!-- 数字滚动加大的效果，还没用到项目里面 -->
<div id="demo">
 
  <div class="nwwest-roll" id="nwwest-roll">
    <ul id="roll-ul" class="roll-ul">
      <li v-for="item in list" ref="rollul" :key="item.index" :class="{anim:animate==true}">
        <span class="name">{{item}}</span>
      </li>
    </ul>
  </div>
 
</div>
</template>

<script>
export default {
  data() {
   return{ 
        animate:true,
        list:[0,0],
        num:0}
  },
 
 mounted() {
 
     let that=this;
 
  //模拟数字增长(也可以是数据库定时查的或ws中接收的)
     setInterval(function() {
          that.num = ++that.num;
           //数字变化后调用滚动事件
          that.scroll(that.num);
      }, 10)
  },
  methods: {
       scroll(num){
        let con1 = this.$refs.rollul;
        con1[0].style.marginTop='-30px';
        this.animate=!this.animate;
 
        var that = this; 
        setTimeout(function(){
            that.list=[num,num]
            con1[0].style.marginTop='0px';
            that.animate=!that.animate;  
        },10)
      }
    }
 
}
</script>

<style>
.nwwest-roll {
  height: 30px;
  overflow: hidden;
}
 
.roll-ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
 
.nwwest-roll li {
  height: 35px;
  line-height: 35px;
}
 
.anim {
  transition: all 1s;
}
</style>